<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <base href="/">
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="layui/css/layui.css">
</head>
<body>
<table class="layui-table" lay-data="{url:'orders/list', page:true, id:'datalist',toolbar:'#toptools'}" lay-filter="datalist">
    <thead>
    <tr>
        <th lay-data="{field:'id'}">ID</th>
        <th lay-data="{field:'userid'}">用户ID</th>
        <th lay-data="{field:'payment'}">付款金额</th>
        <th lay-data="{field:'status'}">状态</th>
        <th lay-data="{field:'paymenttime'}">付款时间</th>
        <th lay-data="{field:'sendtime'}">发货时间</th>
        <th lay-data="{field:'gettime'}">收货时间</th>
        <th lay-data="{field:'endtime'}">结束时间</th>
        <th lay-data="{field:'createtime'}">创建时间</th>
        <th lay-data="{field:'updatetime'}">更新时间</th>
        <th lay-data="{toolbar:'#linetools'}">操作</th>
    </tr>
    </thead>
</table>

<!--行内工具-->
<script id="linetools" type="text/html">
    <button type="button" class="layui-btn layui-btn-xs" lay-event="edit">编辑</button>
    <button type="button" class="layui-btn layui-btn-xs" lay-event="deliver">发货</button>
    <button type="button" class="layui-btn layui-btn-xs" lay-event="delete">删除</button>
</script>
<!--顶部工具-->
<script id="toptools" type="text/html">
    <div class="layui-form-item">
        <div class="layui-input-inline">
            <input type="text" name="text" placeholder="请输入查询内容" autocomplete="off" class="layui-input">
        </div>
        <div class="layui-input-inline">
            <button type="button" class="layui-btn" lay-event="check">查询</button>
            <button type="button" class="layui-btn" lay-event="add">新增</button>
        </div>
    </div>
</script>
<!--新增数据表单-->
<div style="display:none" id="addWin" lay-filter="addWin" class="layui-form">
    <div class="layui-form-item">
        <label class="layui-form-label">用户ID</label>
        <div class="layui-input-inline">
            <input type="text" name="userid" required lay-verify="required" placeholder="请输入用户ID" autocomplete="off" class="layui-input">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">付款金额</label>
        <div class="layui-input-inline">
            <input type="text" name="payment" required lay-verify="required" placeholder="请输入付款金额" autocomplete="off" class="layui-input">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">状态</label>
        <div class="layui-input-inline">
            <input type="text" name="status" required lay-verify="required" placeholder="请输入状态" autocomplete="off" class="layui-input">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">付款时间</label>
        <div class="layui-input-inline">
            <input type="text" name="paymenttime" required lay-verify="required" placeholder="请输入付款时间" autocomplete="off" class="layui-input">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">发货时间</label>
        <div class="layui-input-inline">
            <input type="text" name="sendtime" required lay-verify="required" placeholder="请输入发货时间" autocomplete="off" class="layui-input">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">收货时间</label>
        <div class="layui-input-inline">
            <input type="text" name="gettime" required lay-verify="required" placeholder="请输入收货时间" autocomplete="off" class="layui-input">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">结束时间</label>
        <div class="layui-input-inline">
            <input type="text" name="endtime" required lay-verify="required" placeholder="请输入结束时间" autocomplete="off" class="layui-input">
        </div>
    </div>
    <div class="layui-form-item">
        <button type="button" lay-submit lay-filter="addsave" class="layui-btn">保存</button>
        <button type="button" class="layui-btn" id="addcancel">取消</button>
    </div>
</div>
<!--编辑数据表单-->
<div style="display:none" id="editWin" lay-filter="editWin" class="layui-form">
    <input name="id" type="hidden">
    <div class="layui-form-item">
        <label class="layui-form-label">用户ID</label>
        <div class="layui-input-inline">
            <input type="text" name="userid" required lay-verify="required" placeholder="请输入用户ID" autocomplete="off" class="layui-input">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">付款金额</label>
        <div class="layui-input-inline">
            <input type="text" name="payment" required lay-verify="required" placeholder="请输入付款金额" autocomplete="off" class="layui-input">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">状态</label>
        <div class="layui-input-inline">
            <input type="text" name="status" required lay-verify="required" placeholder="请输入状态" autocomplete="off" class="layui-input">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">付款时间</label>
        <div class="layui-input-inline">
            <input type="text" name="paymenttime" required lay-verify="required" placeholder="请输入付款时间" autocomplete="off" class="layui-input">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">发货时间</label>
        <div class="layui-input-inline">
            <input type="text" name="sendtime" required lay-verify="required" placeholder="请输入发货时间" autocomplete="off" class="layui-input">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">收货时间</label>
        <div class="layui-input-inline">
            <input type="text" name="gettime" required lay-verify="required" placeholder="请输入收货时间" autocomplete="off" class="layui-input">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">结束时间</label>
        <div class="layui-input-inline">
            <input type="text" name="endtime" required lay-verify="required" placeholder="请输入结束时间" autocomplete="off" class="layui-input">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">创建时间</label>
        <div class="layui-input-inline">
            <input type="text" name="createtime" required lay-verify="required" placeholder="请输入创建时间" autocomplete="off" class="layui-input">
        </div>
    </div>
    <div class="layui-form-item">
        <button type="button" lay-submit lay-filter="editsave" class="layui-btn">保存</button>
        <button type="button" class="layui-btn" id="editcancel">取消</button>
    </div>
</div>

<div style="display:none" id="orderdetail" lay-filter="orderdetail" class="layui-form">
    <table class="layui-table">
        <tbody>
        <tr>
            <td>货单</td>
            <td id="ordergoods">牛奶</td>
        </tr>
        <tr>
            <td>收货人</td>
            <td id="receivername">张三</td>
        </tr>
        <tr>
            <td>手机号码</td>
            <td id="receiverphone">123456</td>
        </tr>
        <tr>
            <td>收货地址</td>
            <td id="receiveraddress">北京市/东城区/001号</td>
        </tr>
        </tbody>
    </table>
    <input id="fahuoid" value="a" type="hidden">
    <button type="button" class="layui-btn" id="confirmdeliver">确认发货</button>
</div>

<script src="layui/layui.all.js"></script>


<script>
    const $=layui.$;
    const table=layui.table;
    const form=layui.form;
    const layer=layui.layer;
    const upload=layui.upload;

    table.on("tool(datalist)",function (obj){
        let event=obj.event;
        //被点击按钮所在行的数据
        let data=obj.data;
        if(event=='deliver'){
            if(data.status=="已支付"){
                showorder(data.id);
                layer.open({
                    type:1,
                    title:'订单详情',
                    area:['400px','400px'],
                    content:$("#orderdetail")
                });

            }else{
                layer.msg("订单不符合发货标准！")
            }
        }else if(event=='edit'){
            //回现表单数据
            form.val("editWin",data);
            layer.open({
                type:1,
                title:'编辑',
                area:['400px','400px'],
                content:$("#editWin")
            });
        }else if(event=='delete'){
            if(data.status=="已失效"){
                layer.confirm("确认要删除吗?",function(){
                    $.ajax({
                        url:'orders/delete',
                        data:{id:data.id},
                        success:function(){
                            layer.msg("删除成功",{time:1800,icon:1});
                            layer.closeAll();
                            table.reload("datalist",{page:{curr:1}});
                        }
                    });
                });
            }else{
                layer.msg("该订单不可删除！")
            }
        }
    });
    table.on("toolbar(datalist)",function (obj){
        let event=obj.event;
        if(event=='add'){
            layer.open({
                type:1,
                title:'新增',
                area:['400px','400px'],
                content:$("#addWin")
            });
        }else if(event=='check'){
            //获取输入框中的数据
            let text=$("[name='text']").val();
            //发送到后端 layui表格加载
            table.reload("datalist",{where:{'text':text},page:{curr:1}});
            $("[name='text']").val(text);
        }
    });
    //新增保存提交按钮事件
    form.on("submit(addsave)",function(data){
        console.log("--表单提交,并验证通过--");
        console.log(data);
        //发送ajax提交数据
        $.ajax({
            url:'orders/add',
            data:data.field,
            success:function(result){
                //关闭窗口
                layer.closeAll();
                //提示信息
                layer.msg("添加成功",{icon:1,time:1800});
                //刷新表格
                table.reload("datalist");
            }
        });
        return false;//ajax已经提交了,禁止表单重复提交
    });
    //编辑保存提交按钮事件
    form.on("submit(editsave)",function(data){
        //发送ajax提交数据
        $.ajax({
            url:'orders/edit',
            data:data.field,
            success:function(result){
                //关闭窗口
                layer.closeAll();
                //提示信息
                layer.msg("编辑成功",{icon:1,time:1800});
                //刷新表格
                table.reload("datalist");
            }
        });
        return false;//ajax已经提交了,禁止表单重复提交
    });
    //时间
    function getCurrentDateTime() {
        const now = new Date();

        const year = now.getFullYear();
        const month = String(now.getMonth() + 1).padStart(2, '0'); // 月份从0开始，所以需要加1
        const day = String(now.getDate()).padStart(2, '0');
        const hours = String(now.getHours()).padStart(2, '0');
        const minutes = String(now.getMinutes()).padStart(2, '0');
        const seconds = String(now.getSeconds()).padStart(2, '0');

        return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
    }

    //展示订单
    function showorder(orderId){
        $('#fahuoid').attr("value",orderId);
        $.ajax({
            url: 'orderdetails/get',
            data: {orderid: orderId},
            success: function (result) {
                let orderDetailsText = '';
                result.forEach(detail => {
                    orderDetailsText += `${detail.thatproname} × ${detail.quantity}  `;
                });
                $('#ordergoods').text(orderDetailsText);
            }
        });
        $.ajax({
            url:'orderaddress/get',
            data:{orderid:orderId},
            success:function(result){
                $('#receiveraddress').text(result.receiveraddress);
                $('#receivername').text(result.receivername);
                $('#receiverphone').text(result.receiverphone);
            }
        });
    }
    //确认发货
    $('#confirmdeliver').click(function(e) {
        orderId=$('#fahuoid').val();
        layer.confirm("确认要发货吗?",function(){
            $.ajax({
                url:'orders/edit',
                data:{id:orderId,status:"已发货",sendtime:getCurrentDateTime()},
                success:function(){
                    layer.msg("发货成功",{time:1800,icon:1});
                    layer.closeAll();
                    table.reload("datalist",{page:{curr:1}});
                }
            });
        });
    });
</script>
</body>
</html>